<script setup lang="ts">
import { ref, nextTick, onUpdated, watch } from 'vue'
import type { Message } from '@/model'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()

const { currentMessageList, lastMessage } = storeToRefs(userStore)

defineOptions({
  name: 'MessageArea'
})

// 引用滚动容器
const scrollContainerRef = ref<HTMLElement | null>(null)

// 滚动到底部函数
const scrollToBottom = () => {
  nextTick(() => {
    const container = scrollContainerRef.value
    if (container) {
      container.scrollTop = container.scrollHeight
    }
  })
}

// 监听消息变化，自动滚动到底部
watch(
  currentMessageList,
  () => {
    scrollToBottom()
  },
  { deep: true }
)

// 组件更新后也滚动到底部
onUpdated(() => {
  scrollToBottom()
})
</script>

<template>
  <div ref="scrollContainerRef" class="flex-1 p-4 pt-8 overflow-y-auto">
    <!-- 添加容器来限制宽度并居中 -->
    <div class="max-w-3xl px-2 mx-auto w-full space-y-6 pb-10">
      <!-- 渲染消息列表 -->
      <div
        v-for="message in currentMessageList"
        :key="message.id"
        class="flex"
        :class="{
          'justify-end': message.sender === 'user',
          'justify-start': message.sender === 'bot'
        }"
      >
        <!-- Bot头像 -->
        <div v-if="message.sender === 'bot'" class="flex-shrink-0 mr-3">
          <div
            class="w-8 h-8 bg-gray-200 rounded-full flex items-center justify-center text-gray-600"
          >
            AI
          </div>
        </div>

        <!-- 消息内容 -->
        <div
          class="max-w-[75%] px-4 py-2 rounded-lg bd-1 text-sm"
          :class="{
            'bg-gray-100 text-gray-800': message.sender === 'user',
            'bg-white text-gray-800': message.sender === 'bot'
          }"
        >
          <p style="white-space: pre-wrap">{{ message.content }}</p>

          <div v-if="!message.reference?.length && message.sender === 'bot'" class="mt-2 flex">
            <span class="mt-2px mr-2 text-xs shrink-0 translate-y-2px">引用来源</span>
            <div class="flex flex-wrap gap-2">
              <div
                class="shrink-0 text-gray-400 bd-1 px-2 py-1 flex items-center text-xs hover:bg-gray-100 cursor-pointer"
              >
                <span class="mr-1">[1]</span>
                <span>这是一个文献名称</span>
              </div>
              <div
                class="shrink-0 text-gray-400 bd-1 px-2 py-1 flex items-center text-xs hover:bg-gray-100 cursor-pointer"
              >
                <span class="mr-1">[1]</span>
                <span>这是一个文献名称</span>
              </div>
            </div>
            <!-- <div v-for="ref in message.reference" :key="ref.id">
              <div class="text-gray-400">
                <i class="iconfont icon-ios-document-outline"></i>
                {{ ref.name }}
              </div>
            </div> -->
          </div>

          <div v-if="message.sender === 'bot'" class="flex items-center mt-4">
            <div class="text-xs text-gray-400 mr-4">此内容由AI生成</div>
            <div class="flex items-center">
              <div class="text-gray-400">
                <i class="iconfont icon-copy !text-xs cursor-pointer hover:text-gray-800"></i>
              </div>
              <div class="text-gray-400 ml-2">
                <i
                  class="iconfont icon-ios-refresh !text-xs cursor-pointer hover:text-gray-800"
                ></i>
              </div>
            </div>
          </div>
        </div>

        <!-- User头像 -->
        <div v-if="message.sender === 'user'" class="flex-shrink-0 ml-3">
          <div
            class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center text-white text-sm font-medium"
          >
            {{ message.avatar || 'U' }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
